<template>
    <div class="box">
        <div class="header">
            <div class="back">
                <i class="el-icon-arrow-left"></i>
            </div>
            <div class="logo"></div>
            <div class="info">
                <div>官方客服</div>
                <span>客服热线030102（7:00-次日1:00）</span>
            </div>
        </div>
        <div class="history">
            <button>点击查看历史咨询记录</button>
        </div>
        <div class="dialog">
            <div class="text">
                Hi，尊贵的会员用户，有问题，智能小奇来帮您~
            </div>
        </div>
        <div class="footer">
            <div class="top">
                <div>
                    <span>请输入咨询问题</span>
                </div>
            </div>
            <div class="bottom">
                <div class="el-icon-picture-outline icon"></div>
                <div class="el-icon-camera icon"></div>
                <div class="el-icon-pear icon"></div>
                <input type="text" placeholder="请输入想咨询的问题">
                <button class="submit">发送</button>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return{}
        }
    }
</script>

<style scoped>
.header{
    display: flex;
    line-height: 30px;
    font-size: 17px;
    border-bottom: 1px solid #DDD;
}
.header .logo{
    width: 40px;
    height: 40px;
    background-image: url("https://gw.alicdn.com/imgextra/i4/O1CN016i66TT24lRwUecIk5_!!6000000007431-2-tps-164-164.png_80x80.jpg");
    background-size: cover;
}
.header .info{
    text-align: left;
    margin-left: 15px;
}
.header .back{
    margin-right: 15px;
    text-align: center;
}
.header span{
    color: #666C78;
    font-size: 12px;
}
.history{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}
.history button{
    color: #3399FF;
    border: 0;
    outline: none;
    cursor: pointer;
}
.dialog{
    display: flex;
    justify-content: start;
}
.dialog .text{
    background-color: white;
    border-radius: 30px;
    width: 260px;
    line-height: 18px;
    padding: 6px;
    color:black;
}
.footer{
    position: fixed;
    bottom: 0;
    z-index: 999;
    height: 60px;
    background-color: #F5F5F5;
}
.footer .top{
    height: 30px;
    text-align: left;
}
.footer .top div{
    line-height: 30px;
}
.footer .bottom{
    height: 30px;
    display: flex;
}
.footer input{
    width: 700px;
    outline: none;
    border: 0;
    background-color: white;
}
.footer .icon{
    width: 50px;
    height: 50px;
}
.footer button{
    border-radius: 30px;
    width: 60px;
    height: 23px;
    background-color: #FAA57B;
    color: white;
    border: 0;
    position: fixed;
    right: 10px;
    z-index: 999;
    font-size: 15px;
}
.footer button:hover{
    opacity: 0.5;
}
.el-icon-picture-outline,.el-icon-camera,.el-icon-pear{
    font-size: 20px;
}
</style>